<template>
  <div class="home">
    <div id="user">
      <img class="userHead" :src="imgUrl+user.img" @click="clickUser"/>
      <div class="Logout" @click="Logout">退出</div>
    </div>
    <div id="find_box">
      <div id="find" @click="find">召唤</div>
      <el-button 
        class="friends" 
        type="success" 
        icon="el-icon-chat-line-round"
        @click="openFriendList"
      ></el-button>
    </div>

    <user-card 
      :info="findUser" 
      :url="imgUrl" 
      type="1" 
      :show="dialogVisible"
      @submit="talk"
    ></user-card>

    <user-card 
      :info="user" 
      :url="imgUrl" 
      type="2" 
      :show="dialogVisible2"
      @submit="save"
      @next="canlce"
    ></user-card>

    <el-drawer 
      title="好友列表"
      :visible.sync='showFriendList'
      class="list"
    >
      
      <el-row
        v-for="(item, index) in userList" :key="index"
        class="userRow"
        @click="jumpToUser()"
      ><br/>
        <el-col :span="10">
          <img class="headImg" :src="imgUrl+item.img" @click="jumpToUser(item.uid)"/>
        </el-col>
        <el-col :span="14" class="userName">
          {{ item.name }}
        </el-col><br/>
      </el-row>
      
    </el-drawer>
  </div>
</template>

<script>
// @ is an alias to /src

import userCard from '@/components/infoCard.vue'
import { queryUserInfo, updateUserInfo } from "./api"
import { Message } from 'element-ui'

export default {
  name: 'HomeView',
  components: {
    userCard
  },
  data() {
    return {
      imgUrl: 'http://123.57.249.44/imgs/',
      user: {},
      findUser: {},
      dialogVisible: false,
      dialogVisible2: false,
      type: '1',
      showFriendList: false,
      userList: []
    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem('user'))
    this.queryUserInfo()
  },
  methods: {
    Logout() {
      localStorage.setItem('user', '')
      this.$router.push({path: '/login'})
    },
    find() {
      if ( this.dialogVisible == false && this.dialogVisible2 == true ) {
        this.dialogVisible2 = false
      }
      this.dialogVisible = !this.dialogVisible
    },
    clickUser() {
      if ( this.dialogVisible2 == false && this.dialogVisible == true ) {
        this.dialogVisible = false
      }
      this.dialogVisible2 = !this.dialogVisible2
    },
    save(user) {
      const data = {
        name: user.name,
        introduction: user.introduction,
        email: user.email,
        interest: user.interest,
        city: user.city,
        address: user.address,
        vx: user.vx,
        age: user.age,
        uid: user.uid
      }
      updateUserInfo(data).then(res => {
        if(res.data.data.state == 'succ') {
          Message({
            message: '修改成功！',
            type: 'success'
          })
        } else {
          this.$message({
            message: '后台出错！',
            type: 'error'
          });
        }
      })
    },
    canlce() {
      this.dialogVisible2 = !this.dialogVisible2
    },
    talk(from) {
      console.log(from)
      this.$router.push({ path: '/talk/'+ this.user.uid + '/'+from.uid })
    },
    openFriendList() {
      this.queryUserInfo()
      this.showFriendList = true
    },
    queryUserInfo(){
      console.log(this.user)
      const data = {
        uids: this.user.friends
      }
      queryUserInfo(data).then(res => {
        const infoList = res.data.infoList
        this.userList = infoList
        console.log(`userlist--`, this.userList)
      })
    },
    jumpToUser(to) {
      console.log(to)
      this.$router.push({ path: '/talk/'+this.user.uid+'/'+to })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  body {
    background: white;
    margin: 0;
  }
  .home {
    height: 100vh;
    background: url('../assets/pant_back.jpg') no-repeat;
    background-position: center center;
    
    #user {
      .userHead {
        width: 50px;
        border-radius: 50%;
        border: 3px solid rgb(38, 165, 38);
        box-shadow: 3px 5px 10px rgb(186, 231, 224);
        cursor: pointer;
        &:hover {
          box-shadow: 4px 5px 20px rgb(148, 214, 204);
        }
      }
      .Logout {
        float: left;
        height: 50px;
        text-align: center;
        width: 50px;
        border-radius: 50%;
        border: 1px solid rgb(208, 107, 107);
        box-shadow: 3px 5px 10px rgb(231, 186, 214), inset 0 0 20px rgb(228, 153, 153);
        line-height: 50px;
        font-size: 13px;
        color: rgb(255, 199, 199);
        cursor: pointer;
        &:hover {
          box-shadow: 4px 5px 20px rgb(255, 104, 104), inset 0 0 20px rgb(255, 140, 140);
          color: rgb(255, 155, 155);
        }
      }
      float: left;
      width: 120px;
      // box-shadow: 3px 3px 30px rgb(240, 240, 240);
      border-radius: 5px;
      margin: 10px;
    }

    #find {
      float: right;
      width: 220px;
      height: 60px;
      border: 1px solid rgb(255, 255, 255);
      color: gray;
      text-align: center;
      line-height: 60px;
      margin: 20px;
      border-radius: 10px;
      box-shadow: 0 0 30px rgb(226, 226, 226), inset 0 0 10px rgb(207, 207, 207);
      cursor: pointer;

      &:hover {
        color: gray;
        box-shadow: 0 0 30px rgb(204, 204, 204), inset 0 0 10px rgb(235, 235, 235);
      }
    }

    .friends {
      height: 50px;
      transform: translateY(20px);
    }

    .headImg {
      width: 60px;
      border-radius: 6px;
    }

    .userName {
      height: 60px;
      line-height: 60px;
    }

    .list {
      overflow-y: scroll;
    }

    .userRow {
      cursor: pointer;
      
      &:hover {
        background: rgb(200, 230, 255);
      }
    }
  }

  @media screen and (max-width: 750px) {
    #find_box {
      position: absolute;
      bottom: 20px;
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
</style>
